<template>
  <div class="page-box">
    <!-- 内容 -->
    <div class="header_box">
      <div class="set_img_box">
        <img src="@/assets/images/set.png" />
        <span class="set_title">业务设置</span>
      </div>

      <div class="set_list">
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane label="业务参数" name="parameter"></el-tab-pane>
          <el-tab-pane label="提醒设置" name="reminder"></el-tab-pane>
          <el-tab-pane label="审批设置" name="approval"></el-tab-pane>
          <el-tab-pane label="短信设置" name="note"></el-tab-pane>
          <el-tab-pane label="更多设置" name="more"></el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <keep-alive>
      <component :is="activeComName" class="component_box"></component>
    </keep-alive>
  </div>
</template>
<script setup name="workingDay">
import { ref, getCurrentInstance, defineAsyncComponent, shallowRef } from 'vue'
import { useRouter } from 'vue-router'
const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRouter()
const activeName = ref('parameter')
const parameter = defineAsyncComponent(() => import('./parameter/index.vue'))
const reminder = defineAsyncComponent(() => import('./reminder/index.vue'))
const approval = defineAsyncComponent(() => import('./approval/index.vue'))
const note = defineAsyncComponent(() => import('./note/index.vue'))
const more = defineAsyncComponent(() => import('./more/index.vue'))

let activeComName = shallowRef(parameter)
let activeComNameVal = ref(parameter)
const compsObj = shallowRef({
  parameter,
  reminder,
  approval,
  note,
  more
})

function handleClick(tab) {
  activeComName.value = compsObj.value[tab.paneName]
  activeComNameVal.value = tab.paneName
}
</script>
<style lang="scss" scoped>
.page-box {
  display: block;
  width: 100%;
  background-color: #fff;
  font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
}
.header_box {
  align-items: center;
  width: 100%;
  height: 52px;
  display: inline-block;
  font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
  border: none;
  -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0px 3px 5px rgb(0 0 0 / 0.05);
  box-shadow: 0px 3px 5px rgb(0 0 0 / 0.05);
  vertical-align: middle;
  background: #fff;
  // width: calc(100% - 200px);
  position: fixed;
  z-index: 9;

  .set_img_box {
    width: 200px;
    height: 38px;
    // position: relative;
    float: left;
    img {
      width: 38px;
      height: 38px;
      float: left;
      margin: 6px 0 0 16px;
    }
    .set_title {
      float: left;
      line-height: 50px;
      margin-left: 10px;
      font-weight: 600;
      width: 100px;
    }
  }

  .set_list {
    width: 100%;
  }
}

:deep .el-tabs__nav-wrap::after {
  position: static !important;
}
/*去掉el-tab-pane切换时的蓝色下划线*/
:deep .el-tabs__active-bar {
  background: transparent;
}
:deep .el-tabs__header {
  height: 52px;
}
:deep .el-tabs__item {
  padding: 6px 25px;
}
</style>
